<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<link href="${pageContext.request.contextPath}/css/ListPostingPanel.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/DialogPanel.css" rel="stylesheet" type="text/css" />

<div class="cubeTitleWrapper">
      <span class="cube_title">SharedWorkspaces</span> <span class="wklinks"> <span class="settings"><a
            href="">Settings</a></span>
      </span>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/tiny_mce/jquery.tinymce.js"></script>

<script>
	function confirmDelete(delUrl) {
	  if (confirm("Are you sure you want to delete?")) {
	    document.location = delUrl;
	  }
	}
</script>

<script type="text/javascript">
	Wicket.Event.add(window,"domready",function(event) {
	    $('#description').tinymce({
	          script_url : '${pageContext.request.contextPath}/scripts/tiny_mce/tiny_mce.js',
	          theme : "advanced",
	          auto_resize : "true",
	          relative_urls : false,
	          verify_html : false,
	          width : "100%",
	          height:'250',
	          plugins : "safari,style,layer,emotions,iespell,paste,xhtmlxtras",
	          theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,paste,pastetext,pasteword,|,bullist,numlist,|,emotions",
	          theme_advanced_buttons2 : "",
	          theme_advanced_buttons3 : "",
	          theme_advanced_buttons4 : "",
	          theme_advanced_toolbar_location : "top",
	          theme_advanced_toolbar_align : "left",
	          theme_advanced_resizing : false
	    });
	});
	function ShowEditBox(){
		$('#editBox').show(10);
	}
	function HideEditBox(){
	$('#editBox').fadeOut();
	}

</script>
<div class="cube">
	<div>
		<div class="contentwrapper">
			<div class="contentcolumn">
				<div class="innertube">
					<h2 class="userDefinedBg">
						<span class="right_end" style="text-align: center;">
						<a style="float: left; color: white; font-weight: bold; font-size: 13px;" href="${pageContext.request.contextPath}/discussion">
							Forum
						</a>
						<span style="float: left;">&nbsp;>>&nbsp;</span>
						<a style="float: left; color: white; font-weight: bold; font-size: 13px;" href="${pageContext.request.contextPath}/box/${forum.id}/view">${forum.name }</a>
						
						</span>
					</h2>
					<div class="contentBlock">
						<%@include file="controls/c_topics.jsp" %>
					</div>
					<div class="contentBlock_bottom">
					<span class="right_end"><span></span></span>
				</div>
				</div>
			</div>
		</div>

		<div class="rightcolumn" style="float: right;">
			<div class="innertube">
				<h2 class="userDefinedBg">
					<span class="right_end"><span class="start">Tools for box</span></span>
				</h2>

				<div class="contentBlock">
					<ul class="toolbox userDefinedColor">
						<li class="userDefinedBg">
							<a class="add_link announcement" href="${pageContext.request.contextPath}/box/${forum.id}/add">
								Post a new topic
							</a>
						</li>
						
						<li class="userDefinedBg">
							<a class="add_link announcement" style="background: url(${pageContext.request.contextPath}/images/btn_icon_itemedit.png) no-repeat 5px 50%;" href="#" onclick="ShowEditBox();">
								Edit this box
							</a>
						</li>
						
						<li class="delete">
							<a class="add_link delete" href="javascript:confirmDelete('${pageContext.request.contextPath}/box/${forum.id}/delete')" onclick="">
								Delete this box
							</a>
						</li>
						
					</ul>
					<div class="spacer"></div>
				</div>
				<div class="contentBlock_bottom">
					<span class="right_end"><span></span></span>
				</div>
			</div>
		</div>
		
	</div>
</div>

<div style="display: none;" id="editBox">
	<div style="" id="dialogContainerd9">
		<div id="gcdialog">
			<div class="gcdtitle">
				<span class="title">Edit this box</span>
				<a onclick="HideEditBox();" id="close"></a>
			</div>
			<div class="contentwrapper">
				<div class="content">
					<span>
						<form id="form" method="get" action="${pageContext.request.contextPath}/box/${forum.id}/update" enctype="multipart/form-data">
							<div style="width: 0px; height: 0px; position: absolute; left: -100px; top: -100px; overflow: hidden">
								
							</div>
							<h3 style="color: gray; letter-spacing: 0px;">Name</h3>
							<div >
								<input id="name" name="name" type="text" style="height: 25px; width: 100%;" autofocus="autofocus" value="${forum.name}">
							</div>
							<br>
							<h3 style="color: gray;letter-spacing: 0px;">Description</h3>
							<div class="commentInputWrapper">
								<textarea class="commentArea" name="description" id="description" >${forum.description}</textarea>
								<span class="mceEditor defaultSkin" id="commentf5_parent"></span>
							</div>
							
							<div style="line-height: 34px">
								<a class="gcSubmit" onclick="var name = document.getElementById('name').value; if(name == ''){alert('The name of box can not blank'); return false;} var e=document.getElementById('form'); e.name='submitLink'; e.value='x';var f=document.getElementById('form');var ff=f;if (ff.onsubmit != undefined) { if (ff.onsubmit()==false) return false; }f.submit();e.value='';e.name='';return false;">
									Update 
									<span class="left"></span>
									<span class="right"></span>
								</a> or <a id="cancel" href="#" onclick="HideEditBox();">cancel</a>
							</div>
							<div class="spacer">&nbsp;</div>
						</form>
					</span>
				</div>
			</div>
			<div class="background userDefinedBg"></div>
		</div>
	</div>
</div>